<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=400, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="">
    <title>ECollaboration-Signup</title>

    <!-- Bootstrap core CSS -->
    <link href="res/css/bootstrap.min.css" rel="stylesheet" />
    <!--<link href="res/css/bootstrap-theme.min.css" rel="stylesheet" />-->
    <link href="res/css/font-awesome.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="res/css/bootstrap-select.css" />
    <link href="res/css/style.css" rel="stylesheet" />
    <link href="res/css/card.css" rel="stylesheet" />
    <link href="res/css/checkbox.css" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css' />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
    <div class="container">
        <div class="row text-center">
            <div class="banner">
                <h1>Create a new account</h1>
            </div>
        </div>
        <div class="card light-grey sign-in-card">
            <form class="form-signup" role="form">
                <div class="row fc">
                    <fieldset>
                        <legend class="fc-legend">
                            Full name
                        </legend>
                        <input type="text" class="form-control input-med" placeholder="First" spellcheck="false">
                        <input type="text" class="form-control input-med" placeholder="Last" spellcheck="false">
                    </fieldset>
                </div>
                <div class="row fc">
                    <fieldset>
                        <legend class="fc-legend">
                            Choose an username
                        </legend>
                        <input id="usn" type="text" class="form-control " placeholder="Username" spellcheck="false" />
                    </fieldset>
                </div>
                <div class="row fc">
                    <fieldset>
                        <legend class="fc-legend">
                            Create a password
                        </legend>
                        <input id="pwd" type="password" class="form-control" placeholder="Create password">
                    </fieldset>
                </div>
                <div class="row fc">
                    <fieldset>
                        <legend class="fc-legend">
                            Confirm password
                        </legend>
                        <input type="password" class="form-control" placeholder="Confirm password">
                    </fieldset>
                </div>
                <div class="row fc">
                    <fieldset>
                        <legend class="fc-legend">
                            Email address
                        </legend>
                        <input type="text" class="form-control" placeholder="Email" spellcheck="false">
                    </fieldset>
                </div>
                <div class="row fc">
                    <fieldset>
                        <legend class="fc-legend">
                            Birthday
                        </legend>
                        <select id="mnt" title="Select month">
                            <option data-hidden="true"></option>
                            <option>
                                January
                            </option>
                            <option>
                                February
                            </option>
                            <option>
                                March
                            </option>
                            <option>
                                April
                            </option>
                            <option>
                                May
                            </option>
                            <option>
                                June
                            </option>
                            <option>
                                July
                            </option>
                            <option>
                                August
                            </option>
                            <option>
                                September
                            </option>
                            <option>
                                October
                            </option>
                            <option>
                                November
                            </option>
                            <option>
                                December
                            </option>
                        </select>
                        <input id="bday" type="text" class="form-control input-tiny" maxlength="2" placeholder="Day" spellcheck="false">
                        <input id="byear" type="text" class="form-control input-tiny-better" maxlength="4" placeholder="Year" spellcheck="false">
                    </fieldset>
                </div>
                <div class="row fc">
                    <fieldset>
                        <legend class="fc-legend">
                            Gender
                        </legend>
                        <select id="gnd" title="I am...">
                            <option data-hidden="true"></option>
                            <option>Female</option>
                            <option>Male</option>
                            <option>Other</option>
                        </select>
                    </fieldset>
                </div>
                <!--<div class="row fc">
    <fieldset>
        <legend class="fc-legend">
            I am
        </legend>
    </fieldset>
</div>-->
                <div class="row">
                    <div class="checkbox">
                        <div class="pull-left">
                            <!--<input id="chbx1" type="checkbox" value="remember-me" />-->
                            <div class="cbxinit cbx cbx-def">
                                <input id="cbx1" type="checkbox" class="cbxinit cbx-in" value="remember-me">
                            </div>
                            <label for="cbx1" class="cbxinit cbx-label">I agree to the <a href="javascript:void(0);">Terms &amp; Conditions</a>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <button class="btn btn-primary pull-right" type="submit">Next</button>
                </div>
            </form>
        </div>
        <div class="row text-center mgbtm15">
            Powered by ECollaboration, Enterprise Collaboration Software.
        </div>
        <div class="row text-center">
            <a class="btmlink" href="javascript:void(0);">Report a bug</a>
            <a class="btmlink" href="javascript:void(0);">Latest news</a>
            <a class="btmlink" href="javascript:void(0);">Request feature</a>
            <a class="btmlink" href="javascript:void(0);">Privacy &amp; Terms</a>
            <a class="btmlink" href="javascript:void(0);">Help</a>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="res/js/jquery-2.1.1.min.js"></script>
    <!-- compiled and minified Bootstrap JavaScript -->
    <script src="res/js/bootstrap.min.js"></script>
    <script src="res/js/bootstrap-select.js"></script>
    <script src="res/js/jquery.alphanum.js"></script>
    <script src="res/js/checkbox.js"></script>
    <!--<script src="res/js/custom-popover.js"></script>-->
    <script type="text/javascript">
        $(document).ready(function () {

            $("#usn").popover({
                id: 'pop1',
                trigger: 'click focus',
                placement: 'left',
                delay: {
                    show: 50,
                    hide: 300
                },
                html: true,
                content: 'You can user letters and numbers only'
            });

            $("#pwd").popover({
                trigger: 'click focus',
                placement: 'left',
                delay: {
                    show: 50,
                    hide: 300
                },
                html: true,
                content: '<strong style="font-size:12px;">Password strength</strong><br/><br/>Password should be atleast 8 characters long.'
            });


            $("#mnt").selectpicker({
                width: '130px',
                noneSelectedText: 'Select Month'

            });
            $("#gnd").selectpicker({
                width: '100%'
            });

            $("#bday").numeric({
                min: 1,
                max: 31
            });
            $("#byear").numeric({
                max: (new Date).getFullYear()
            });

        });
    </script>
</body>

</html>
